<template>

    <el-row>
        <el-col :span="4">
            <el-input v-model="query.caseNumber" placeholder="输入病历号"></el-input>
        </el-col>
        <el-col :span="4">
            <el-select v-model="query.checkState" placeholder="选择状态">
                <el-option label="选择状态" :value="null"/>
                <el-option label="已缴费" value="已缴费"/>
                <el-option label="执行完成" value="执行完成"/>
                <el-option label="已出结果" value="已出结果"/>
            </el-select>
        </el-col>
        <el-col :span="4">
            <el-button @click="getByPage">搜索</el-button>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="24">
            <el-table :data="pb.records" 
		          stripe 
				  border>
                    <el-table-column prop="medicalTechnology.techName" label="项目名称" width="180" />
                    <el-table-column prop="medicalTechnology.techPrice" label="价格" width="100"/>
                    <el-table-column prop="checkInfo" label="检查描述" width="180"/>
                    <el-table-column prop="checkPosition" label="检查部位" width="180"/>
                    <el-table-column prop="checkState" label="状态" width="100"/>
                    <el-table-column prop="checkRemark" label="备注" width="100"/>
                    <el-table-column label="操作" width="180">
                        <template #default="{row}" >
                            <el-button v-if="row.checkState=='已缴费'"
                                @click="handleCheck(row)" >执行检查</el-button>
                            <el-button v-if="row.checkState=='执行完成' || row.checkState=='已出结果'"
                                @click="handleResult(row)" >编辑结果</el-button>
                        </template>
                    </el-table-column>
		</el-table>
        </el-col>
    </el-row>
     <!-- 分页组件 -->
	<el-row>
	  <el-col :span="6"></el-col>
	  <el-col :span="12">
		   <el-pagination
		        v-model:current-page="query.current"
		        v-model:page-size="query.size"
		        :page-sizes="[5, 8, 10, 20]"
		        layout="total, sizes, prev, pager, next, jumper"
		        :total="pb.total"
		        @size-change="getByPage"
		        @current-change="getByPage"
		      />
	  </el-col>
	  
	</el-row>  


    <el-dialog v-model="dialogFormVisible" title="编辑检查信息" width="500" draggable>
        <el-form :model="form">
		  <el-form-item label="项目名称" :label-width="formLabelWidth">
			 <span>{{form.medicalTechnology.techName}}</span>
		  </el-form-item>
		  <el-form-item label="项目价格" :label-width="formLabelWidth">
            <span>{{form.medicalTechnology.techPrice}}</span>
		  </el-form-item>
		  <el-form-item label="检查描述" :label-width="formLabelWidth">
		  	  <span>{{form.checkInfo}}</span>
		  </el-form-item>
          <el-form-item label="检查部位" :label-width="formLabelWidth">
		  	  <span>{{form.checkPosition}}</span>
		  </el-form-item>
          <el-form-item label="创建时间" :label-width="formLabelWidth">
		  	  <span>{{form.creationTime}}</span>
		  </el-form-item>
		  <el-form-item label="检查时间" :label-width="formLabelWidth">
		  	  <span>{{form.checkTime}}</span>
		  </el-form-item>
		  <el-form-item label="检查结果" :label-width="formLabelWidth">
			  <el-input v-model="form.checkResult"></el-input>
		  </el-form-item>
		</el-form>
		<template #footer>
		  <div class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取消</el-button>
			<el-button type="primary" @click="updateResult">
			  确认提交
			</el-button>
		  </div>
		</template>
    </el-dialog>

</template>

<script setup>
import httpRequest from '../../common/index.js';
import { onMounted, ref, getCurrentInstance, computed, watch } from 'vue';
import { ElMain, ElMessage,ElMessageBox } from 'element-plus';

const {proxy} = getCurrentInstance();

const query = ref({
    current: 1,
    size: 5,
    caseNumber: '',   //病历号  来自于register表  所以服务端需要将checkRequest和register做联查
    checkState: ''    //检查状态
})

const pb = ref({
    total: 0,
    pages: 0,
    records: []
});

//查询所有的检查 进行的是分页查询
const getByPage = ()=>{
    httpRequest(
        proxy,
        'post',
        '/checkrequest/page',
        query.value,
        resultBean=>{
            pb.value = resultBean.data;
        }
    )
}

//设置登录用户的编号为43(检查医生的id)   @TODO 应该是登录之后动态获取的
const loginUserId = ref(43)

const form = ref({})

const dialogFormVisible = ref(false);

//执行检查   update check_request set check_time=now(),check_state='执行完成',check_employee_id=? where id=?
const handleCheck = (row)=>{

    form.value.id = row.id
    form.value.checkEmployeeId = loginUserId.value
    form.value.checkState = '执行完成'

    httpRequest(
        proxy,
        'put',
        '/checkrequest/update',
        form.value,
        resultBean=>{
            ElMessage.success('检查完成');
            row.checkState = '执行完成';
        }
    )
}

//录入结果 更新检查申请的数据
const updateResult = ()=>{
    let obj = {
        id: form.value.id,
        inputcheckEmployeeId: loginUserId.value,
        checkResult: form.value.checkResult,
        checkState: '已出结果'
    }

    httpRequest(
        proxy,
        'post',
        '/checkrequest',
        obj,
        resultBean=>{
            ElMessage.success('录入结果成功');
            form.value.checkState = '已出结果';
            dialogFormVisible.value = false;
        }
    )
}

//弹出录入结果的对话框
const handleResult = (row)=>{
    dialogFormVisible.value = true;
    form.value = row;
}

onMounted(()=>{
    getByPage();
})

</script>

<style>
</style>